<template>
  <el-popover placement="bottom" v-model="visible">
    <div class="stu-select-filter">
      <KeywordInput v-model="condition.name" @change="changeValue" @enter="search"></KeywordInput>
      <el-button type="text"  @click="clearValue()" size="mini" class="float-right">{{$t('message.clear')}}</el-button>
      <div style="width:600px;margin-top: 4px;">
        <edu-table :data="dataList" :total="total" ref="tableRef" @page-change="onCurrentPageChange" 
          :pageSize="condition.pageSize_" 
          :order="false" :selection="false" :max-height="260"  @refresh-click="search"
          paginationLayout="prev, pager, next" paginationStyle="" :paginationShowRefresh="true">
            <edu-table-column :label="$t('label.stuCode')" prop="studentId">
              <template slot-scope="scope">
                {{ mode ? scope.row.studentCode : scope.row.studentId }}
              </template>
            </edu-table-column>
            <edu-table-column :label="$t('label.stuName')" prop="name"/>
            <edu-table-column :label="$t('label.trainingLevel')" prop="trainingLevelI18n"/>
            <edu-table-column :label="$t('label.college')" prop="facultyI18n"/>
            <edu-table-column :label="$t('label.major')" prop="professionI18n"/>
            <edu-table-column :label="$t('label.operation')">
              <template slot-scope="scope">
                <el-button type="text"  @click="select(scope.row)" size="mini" >{{$t('选择')}}</el-button>
              </template>
            </edu-table-column>
        </edu-table>
      </div>
    </div>
    <div slot="reference">
      <!-- :readonly="readonly" -->
      <el-input class="select-input"  style="width:100%;"  :disabled="disabled" @click="handlerClick"
        v-model="labelValue" :placeholder="$t('common.pla.pleaseSelect')">
        <i slot="suffix" class="el-input__icon el-icon-arrow-up" 
              :class="{'is-reverse': visible}"></i>
      </el-input>
    </div>
  </el-popover>


</template>
<script>
import { findStuInfoList, findStuInfoListByEnglishTeacher } from 'common/src/api/studentinfo'
import { findStuInfo } from "common/src/api/election/noGradCouSub"
import UTILS from "common/src/utils/utils";
/**
 * 学生下拉框组件
 */
export default {
  name: "EduStudentSelect",
  props: {
    value: {required: true},
    clearable:{default: false},
    readonly: {default: true},
   // disabled: {default: true},
    valueKey: {default: 'studentId'},
    queryParam: {default: () => {}},
    multiple: {default: false}, // 是否多选
    autoLoad: {default: true}, // 是否自动加载
    mode: {default: null}, // 选课判断类型用的
    isEnglish: {default: false}
  },
  data() {
    return {
      dataList: [],
      labelValue: '',
      condition: {
        name: "",
        pageNum_: 1,
        pageSize_: 10,
      },
      visible: false,
      total: 0,
      disabled: false
    }
  },
  mounted() {
    if(this.autoLoad){
      this.search();
    }
  },
  watch:{
    value(val, oldVal) {
        if(!val){
          this.labelValue = '';
        }
    },
    queryParam(val, oldVal) {
        this.search();
    }
  },
  methods: {
    clearKey() {
      this.condition.name= '';
      this.search();
    },
    handlerClick(){
      this.visible = !this.visible;
    },
    select(stu){
      this.visible = false;
      this.setValue(stu);
    },
    clearValue() {
      this.setValue(null);
    },
    setValue(stu){
      this.labelValue = '';
      let value = "";
      if(stu){
        value = this.mode ? stu['studentCode'] : stu[this.valueKey] ;
        this.labelValue = stu.name + '(' + ( this.mode ? stu.studentCode : stu.studentId ) + ')';
      }else {
        value = null;
        this.labelValue = '';
      }
      this.$emit("input", value);
      if(!_.isEqual(this.value, value)){
        this.$emit('change', stu);
      }
    },
    setDisable(flag) {
      this.disabled = flag;
    },
    search(param) {
      let queryData = UTILS.clone(this.condition == null ? {} : this.condition);
      if(_.isNil(queryData.pageSize_)) {
        queryData.pageSize_ = 10;
      }
      if(_.isNil(queryData.pageNum_)) {
        queryData.pageNum_ = 1;
      }
      queryData = _.extend(queryData, this.queryParam, param);
      if(this.mode) {
          const temp = {
            pageNum_: queryData.pageNum_,
            pageSize_: queryData.pageSize_,
            condition:{
              keyword: queryData.name,
              mode: this.mode
            }
          }
         findStuInfo(temp).then(res => {
          this.dataList = res.data.list;
          this.total = res.data.total_;
          if(this.value){
            _.forEach(this.dataList, stu => {
              if(this.value == stu[this.valueKey]){
                this.setValue(stu);
              }
            });
          }
          this.$emit('load-done', this.dataList);
        });
      }else {
        if(this.isEnglish) {
          findStuInfoListByEnglishTeacher(queryData).then(res => {
            this.dataList = res.data.list;
            this.total = res.data.total_;
            if(this.value){
              _.forEach(this.dataList, stu => {
                if(this.value == stu[this.valueKey]){
                  this.setValue(stu);
                }
              });
            }
            this.$emit('load-done', this.dataList);
          });
        } else {
          findStuInfoList(queryData).then(res => {
            this.dataList = res.data.list;
            this.total = res.data.total_;
            if(this.value){
              _.forEach(this.dataList, stu => {
                if(this.value == stu[this.valueKey]){
                  this.setValue(stu);
                }
              });
            }
            this.$emit('load-done', this.dataList);
          });
        }
         
      }
     
    },
    onCurrentPageChange(pager) {
      this.condition.pageSize_ = pager.pageSize;
      this.condition.pageNum_ = pager.pageNum;
      this.search();
    }
  },
  created() {
    if (this.multiple && !Array.isArray(this.value)) {
        this.$emit("input", []);
    }
    if (!this.multiple && Array.isArray(this.value)) {
        this.$emit("input", "");
    }
  },
};

</script>

<style lang="scss" scoped>
.stu-select-filter{
  .select-input{
    input{
      cursor: pointer;
    }
  }
}
.el-input__icon.el-icon-arrow-up{
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  &.is-reverse{
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0);
  }
}
</style>